<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>线上课堂</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

    <style>
        button:focus,.plconfrimbtn button:active{outline: none !important;}
        .blankcontent{background:#fff;}
       .videtitleinfo{padding:4%;margin:0 auto;max-width: 1440px;}
       .videtitleinfo p{margin-top:3%;font-size:15px;border-bottom:solid 1px #b2b2b2;padding-bottom:3%;}
       .remarkform{margin:3% auto 0;max-width: 1440px;padding:0 4%;}
       .remarkcontent{padding:4%;max-width: 1440px;margin:0 auto;}
       .pltextinfo a,.pltextinfo{font-size:15px;color:#333;font-weight: bold;}
       .pltextinfo{margin-bottom:.6rem;}
       .pltextinfo span{position:absolute;right:3%;font-size:14px;color:#777;font-weight: normal;}
       .prtextarea{background:#fff;border:none;height:150px;box-shadow: none;}
       .prtextarea:focus{background:#fff;}
       .plconfrimbtn{text-align:right;}
       .plconfrimbtn button{    width: 156px;line-height: 36px;border-radius: 18px;color: #ffffff;background: #151765;padding: 0;}
        .pluserhead .iconfont{width:40px;height:40px;border-radius: 50%;background:#cecece;text-align: center;color:#fff;    display: inline-block;
    font-size: 20px;line-height: 40px;margin-right:15px;}
        .plitem{margin-top:2rem;border-bottom:dashed 1px #b2b2b2;padding-bottom:2rem;}
            .plcontent{padding:.5rem 0 10px 50px;}
        .dzcontent{padding-left:50px;font-size:16px;}
        .dzcontent .iconfont{font-size:25px;color:#cdcdcd;margin-right:10px;}
        .pllabel strong{color:#777;font-size:1rem;font-weight: normal;padding-left:1rem;position:relative;margin:0 .7rem 1rem 0;}
        .pllabel strong::before{position:absolute;width:.7rem;height:.7rem;top:0;left:0;background:#b2b2b2; content:" ";margin-top:.1rem;}
    </style>
    <div class="navbarheadnull">    
        <div><img src="./img/videoimg.png" width="100%"></div>
    </div>
    <div class="blankcontent">
        <div class="videtitleinfo">
            <h3>色彩搭配及色彩如何把控（第一课时）</h3>
            <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
                    简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>
            <div class="pllabel">
                <strong>杭州画室</strong><strong>杭州画室</strong><strong>杭州画室排名</strong><strong>杭州画室排名</strong>
            </div>
        </div>
    </div>
    <div class="remarkform">
        <p class="pltextinfo">
            <a href="">登录</a>/<a href="">注册</a>
            <span>0/100字</span>
        </p>
        <textarea class="prtextarea" name="" id=""></textarea>
        <p class="plconfrimbtn">
            <button>发表评论</button>
        </p>
    </div>
    <div class="blankcontent">
        <div class="remarkcontent">
            <h3>热门评论</h3>
            <div class="plitem">
                <div class="pluserhead"><i class="iconfont icon-yonghu"></i><span>木子</span></div>
                <p class="plcontent">讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺
                        讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好</p>
                <div class="dzcontent"><i class="iconfont icon-dianzan"></i><span>1</span></div>
            </div>
            <div class="plitem">
                <div class="pluserhead"><i class="iconfont icon-yonghu"></i><span>木子</span></div>
                <p class="plcontent">讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺
                        讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好</p>
                <div class="dzcontent"><i class="iconfont icon-dianzan"></i><span>1</span></div>
            </div>
            <div class="plitem">
                <div class="pluserhead"><i class="iconfont icon-yonghu"></i><span>木子</span></div>
                <p class="plcontent">讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺
                        讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好的讲的挺好</p>
                <div class="dzcontent"><i class="iconfont icon-dianzan"></i><span>1</span></div>
            </div>
        </div>
        <div class="pagination-centered">
            <ul class="pagination">
                <li class="arrow"><a href="#">&laquo;</a></li>
                <li class="current"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="arrow"><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
    
</body>
</html>